<template>
  <div class="grid grid-cols-3 gap-x-8px gap-y-10px text-#fff pl-4px pr-20px text-12px">
    <div class="accident-item flex justify-center items-center w-130px h-130px"
      v-for="i in ACCIDENT_LIST" :key="i.type + i.prop">
      <div @click="accidentRes(itemValue(i.type, i.prop), i.type, i.sglx)">
        <div class="text-center mb-5px text-23px">
          <count-up-to :startVal="0" :endVal="itemValue(i.type, i.prop)" :duration="1" />
        </div>
        <div class="text">{{ i.label }}</div>
      </div>
    </div>
  </div>
  <AccidenScrieeningPaging />
</template>

<script lang="ts" setup>
import { ACCIDENT_LIST } from "@/const/home"
import { GetHomeCompareDataPageInfo } from "@/service/api/dashboard";
import { useAccidentTableList } from "@/store";
import CountUpTo from "vue-countup-v3";

const props = defineProps(["today", "yesterday"]);
const tableParent = useAccidentTableList();

const itemValue = computed(() => (type: string, prop: string) => {
  return type === "today" ? props.today[prop] : props.yesterday[prop]
})

const accidentRes = async (data, type, sglx = "") => {
  try {
    if(data === 0) return
    let params = {
      pageNum: '1',
      pageSize: data,
      flag: type,
      sgllx: sglx,
    };
    const res: any = await GetHomeCompareDataPageInfo(params);
    tableParent.accidentPageInfoList = res.rows;
    tableParent.accidentPageInfoShow = true;
  } catch (err) {
    console.log(err)
  }
};
</script>

<style lang="less" scoped>
.accident-item {
  background: url("@/assets/img/home/bg-1.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>
